import React, { useState } from 'react'
import { Input, DatePicker, Form, Button, Modal, Space } from 'antd';
import './css/Filterquery.scss'

export default function Filterquery() {
    const [isModalVisible, setIsModalVisible] = useState(false)
    const handlerOpen = () => {
        setIsModalVisible(true)
    }
    const [form] = Form.useForm()
    const search = () => {
        setIsModalVisible(false)
    }
    const handleCancel = () => {
        setIsModalVisible(false);
      };
    const onReset = () => {
        form.resetFields();
      }
    return (
        <div className='box2'>
            <div className='top'>
                <span className='title1'>筛选查询</span>
                <div>
                    <button className='querybtn1'>查询结果</button>
                    <button className='querybtn2' onClick={handlerOpen}>高级检索</button>
                    <Modal title="高级检索" visible={isModalVisible} footer={null} onCancel={handleCancel} width={600}>
                        <Form form={form} name="control-hooks" layout="vertical">
                            <div className='search-box'>
                            <div className='search'>
                            <div className='form-left'>
                                <Form.Item name="id_accound" label="用户账号" style={{width: 200}}>
                                    <Input placeholder='用户ID/账号'/>
                                </Form.Item>
                                <Form.Item name="funding_side" label="资金方" style={{width: 200}}>
                                    <Input />
                                </Form.Item>
                                <Form.Item name="company_name" label="合作渠道" style={{width: 200}}>
                                    <Input />
                                </Form.Item>
                            </div>
                            <div className='form-right'>
                                <Form.Item name="name" label="用户姓名" style={{width: 200}}>
                                    <Input placeholder='用户姓名'/>
                                </Form.Item>
                                <Form.Item name="repayment_status" label="还款状态" style={{width: 200}}>
                                    <Input />
                                </Form.Item>
                                <Form.Item name="due_date" label="还款时间" style={{width: 200}}>
                                    <DatePicker placeholder='请选择时间' style={{width: 200}}/>
                                </Form.Item>
                            </div>
                            </div>
                            <div className='btn'>
                            <Form.Item>
                                <Space>
                                    <Button type="primary" htmlType="submit" onClick={search}>开始检索</Button>
                                    <Button htmlType="button" onClick={onReset}>重置</Button>
                                </Space>
                            </Form.Item>
                            </div>
                            </div>
                            </Form>
                    </Modal>
                </div>
            </div>
            <div className='bottom'>
                <div className='input-box'>
                    <span>用户：</span>
                    <Input placeholder="账号/姓名/身份证号/手机号" className='input' />
                </div>
                <div>
                    <span>违约时间：</span>
                    <DatePicker />
                </div>
            </div>
        </div>
    )
}
